Questions
5 of 45
1What is a pseudo-element in CSS?
2How are pseudo-elements different from pseudo-classes?
3What is the syntax of a pseudo-element?
4Name some commonly used pseudo-elements.
5What does the ::before pseudo-element do? What does the ::after pseudo-element do?
6How can you insert content using pseudo-elements?
7What is the difference between :before and ::before? Why were pseudo-elements changed from one colon (:) to two (::) in CSS3?
8What does the ::first-letter pseudo-element do?
9What does the ::first-line pseudo-element do?
10How can you style the first line of a paragraph differently?
11Can pseudo-elements be styled with animations or transitions?
12What’s the difference between using ::before and ::after?
13Can pseudo-elements be positioned using CSS positioning properties? Can pseudo-elements have background images or colors? How can you use pseudo-elements to create shapes or icons?
14Can you use multiple pseudo-elements on the same element?
15What is the ::selection pseudo-element used for?
16How does stacking and z-index affect pseudo-elements?
17Can pseudo-elements have child elements or content inside them?
18Can you apply pseudo-elements to replaced elements (like <img>)?
19How do pseudo-elements interact with display and overflow properties?
20What’s the difference between using pseudo-elements and real elements for decoration?
21How does inheritance work with pseudo-elements?
22Can pseudo-elements trigger JavaScript events (like click)?
23How can you control the generated content with pseudo-elements using attr()?
24Can pseudo-elements be used inside flex or grid layouts?
25How do you control the stacking order of ::before and ::after pseudo-elements?
26How can you create a tooltip using pseudo-elements?
27How can you make a custom underline or highlight effect using ::after?
28How can you make a quotation mark appear before a paragraph using pseudo-elements?
29How do you create a triangle or arrow shape using only CSS pseudo-elements?
30How can you use pseudo-elements to add icons without extra markup?
31How can you create a button hover animation using ::before or ::after?
32How can pseudo-elements help in implementing skeleton loaders or shimmer effects?
33How can you use ::before and ::after to clear floats?
34How can you create a border animation using pseudo-elements?
35How can pseudo-elements be used in responsive design?
36What is the ::marker pseudo-element and when is it used?
37What does the ::placeholder pseudo-element do?
38How does ::cue work with media elements?
39What is ::backdrop, and where is it used?
40What is the difference between ::file-selector-button and other input pseudo-elements?
41How does the ::part() pseudo-element work in Web Components?
42How is ::slotted() different from ::part() in shadow DOM styling?
43Can you style text highlights with pseudo-elements?
44How can ::selection be customized for accessibility and branding?
45What are the limitations of pseudo-elements compared to actual DOM elements?
CSSCSS
Basics
Selectors
Box model
Text formatters
Positioning
Pseudo classes
Pseudo elements
Flexbox
Grid
Display
Combinators
Overflow
Breakpoint
Transformation and Transition
Frameworks
Everything else
05 / 45

What does the ::before pseudo-element do? What does the ::after pseudo-element do?

Understanding ::before and ::after Pseudo-Elements in CSS

The ::before and ::after pseudo-elements in CSS allow you to insert content before or after an element's actual content without modifying the HTML structure.

Key Points
  1. 1

    ::before inserts content before the element's content.

  2. 2

    ::after inserts content after the element's content.

  3. 3

    Both pseudo-elements require the content property to display anything.

  4. 4

    They are often used for decorative purposes, icons, or additional styling cues.

Example: Using ::before and ::after

In this example, ::before adds a star before the paragraph text, and ::after adds sparkles after the text. The original HTML remains unchanged.

Best Practices
  1. 1

    Always use the content property when using ::before or ::after.

  2. 2

    Use these pseudo-elements for decoration or styling, not for essential content.

  3. 3

    Combine with other CSS properties like color, font-size, and background for visual effects.

  4. 4

    Test across browsers to ensure consistent display.

Difficulty: 3/10
Topics: pseudo-elements, CSS content injection, layout manipulation

Scenario Questions

0-2 years experience
  1. 1

    How would you use ::before to add a checkmark icon before every successful form field?

  2. 2

    What happens if you try to set a background color on ::after without specifying content?

2-5 years experience
  1. 1

    A tooltip component’s ::after arrow is misaligned on mobile — how would you debug and fix it?

  2. 2

    Why did adding ::before to a link break the hover state in IE11, and how would you resolve it?

5-8 years experience
  1. 1

    How would you design a scalable badge system using ::before and ::after that works across themes and RTL layouts?

  2. 2

    You’re optimizing a high-traffic page — what performance tradeoffs do you consider when using pseudo-elements for decorative UI elements?

8+ years experience
  1. 1

    How would you architect a design system that phases out ::before/::after for icons in favor of SVGs without breaking legacy components?

  2. 2

    When migrating a legacy CSS codebase, how do you prioritize replacing pseudo-element-based decorations with semantic HTML while maintaining accessibility and visual consistency?

Follow-up Questions

  • ❓What happens if you forget to set the content property?
  • ❓How would you debug if ::before isn't showing up on a button?
  • ❓Can you use ::before or ::after to add interactive elements like buttons?